<template>
	<view class="purse">
		<view class="title">
			账户余额
		</view>
		<view class="money">
			<text>￥</text>{{money}}
		</view>
		<view class="record" @tap="record">
			查看提现记录
			<image src="../../static/images/arrows-right.png" mode=""></image>
		</view>
		<view class="btn" @tap="sub">
			提现
		</view>
		<view class="addBank" >
			<text v-if="!isHaveBankCard" @tap="add">添加银行卡</text>
			<text v-if="isHaveBankCard" @tap="goList">我的银行卡</text>
		</view>
		<!-- 模态框 -->
		<view class="uni-banner" style="background: #FFFFFF;" v-if="bannerShow">
			<view class="tip">
				请先添加银行卡
			</view>
			<view class="bottom">
				<view class="left" @tap="concel">
					取消
				</view>
				<view class="right" @tap="add">
					去添加
				</view>
			</view>
		</view>
		<view class="uni-mask" v-if="bannerShow" @tap="hide"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:0,
				bannerShow: false,
				isHaveBankCard:false
			}
		},
		onLoad() {
			this.getdata()
		},
		onShow() {
			this.queryBankCard()
			this.bannerShow = false
		},
		methods: {
			//跳转提现记录
			record(){
				uni.navigateTo({
					url:"./withdrawList"
				})
			},
			//点击提现  判断是否绑卡
			sub(){
				if(this.isHaveBankCard){
					uni.navigateTo({
						url:"./withdraw"
					})
				}else{
					this.bannerShow=!this.bannerShow;
				}
			},
			//跳转添加银行卡
			add(){
				
				uni.navigateTo({
					url:"../bank/addBank"
				})
			},
			concel(){
				this.bannerShow=!this.bannerShow;
			},
			goList(){
				uni.navigateTo({
					url:"../bank/bankCardList"
				})
			},
			getdata(){
				let data = {
					accountId:uni.getStorageSync("buyerAccountId")
				}
				this.$http.post('/api/v1.0/user/findUserProperty',data,res=>{
					if(res.data.data.money == null){
						this.money = 0
					}else{
						this.money = res.data.data.money;
					}
					
					
				})
			},
			queryBankCard(){
				let data = {
					accountId:uni.getStorageSync("buyerAccountId")
				}
				this.$http.post('/api/v1.0/user/queryAccountIsExtBankByAccountId',data,res=>{
					if(res.data.data.total > 0){
						this.isHaveBankCard = true;
					}else{
						this.isHaveBankCard = false;
					}
				})
			}
			
			
		}
	}
</script>

<style lang="scss">
	.purse{
		text-align: center;
		padding-top: 136upx;
		.title{
			font-size:36upx;
			font-weight:500;
			color:rgba(51,51,51,1);
		}
		.money{
			font-size:78upx;
			font-weight:bold;
			color:rgba(51,51,51,1);
			 text{
				font-size:50upx;
			 }
		}
		.record{
			margin-top: 10upx;
			font-size:28upx;
			font-weight:500;
			color:rgba(153,153,153,1);
			image{
				width: 22upx;
				height: 22upx;
			}
		}
		.btn{
			width:616upx;
			line-height:104upx;
			background:linear-gradient(0deg,rgba(227,67,57,1),rgba(249,98,58,1));
			border-radius:20upx;
			margin: 70upx auto 0;
			font-size:40upx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(255,255,255,1);
		}
		.addBank{
			margin-top: 52upx;
			font-size:32upx;
			font-weight:500;
			text-decoration:underline;
			color:rgba(239,83,57,1);
		}
		/* 遮罩层 */
		.uni-mask {
			background: rgba(0, 0, 0, 0.6);
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 888;
		}
		
		/* 弹出层形式的通知*/
		.uni-banner {
			width: 80%;
			position: fixed;
			left: 50%;
			top: 50%;
			border-radius: 26.66upx;
			z-index: 88888;
			transform: translate(-50%, -50%);
			height: 310upx;
			
			.tip {
				text-align: center;
				font-size: 34upx;
				font-weight: bold;
				line-height: 210upx;
				font-weight:500;
				color:rgba(51,51,51,1);
				border-bottom: 1upx solid #E6E6E6;
			}
			
			.bottom {
				display: flex;
				flex-direction: row;
				align-items: center;
				color: #333333;
				font-size: 36upx;
				font-weight: bold;
				text-align: center;
		
				.left {
					width: 50%;
					line-height: 99upx;
					font-size:36upx;
					font-weight:bold;
					color:rgba(51,51,51,1);
				}
		
				.right {
					width: 50%;
					height: 98upx;
					border-left: 1upx solid #E6E6E6;
					font-size:36upx;
					font-weight:bold;
					color:rgba(246,56,16,1);
					line-height: 99upx;
				}
			}
		}
	}
</style>
